
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="../static/css/bootstrap.min.css">
</head>
<body>

	<div class="container">
		<ol class="breadcrumb">
			<li><a href="#">用户管理</a></li>
			<li class="active">用户列表</li>
			<li style="float:right">
			<a href="/loginOut">退出</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
		</ol>
		
		<!-- 主体内容开始 -->
			<!-- 第一行开始 -->
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<!-- 表单开始 -->
				<form action="" class="form-horizontal">
					<!-- panel开始 -->
					<div class="panel panel-info">
						<div class="panel-heading"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</div>
						<!-- panel-body开始 -->
						<div class="panel-body">
							
								<div class="row">
									<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 ">
										<div class="form-group">
											<label for="userName" class="col-sm-3 control-label">用户名</label>
											<div class="col-sm-9">
												<input type="text" class="form-control" name="userName"
													placeholder="用户名">
											</div>
										</div>
										
									</div>

								</div>

						</div>
						<!-- panel-body结束 -->
						<div class="panel-footer text-right">
							<button type="reset" name="resetBtn" id="resetBtn"
								class="btn btn-warning">重置</button>
							<input type="submit" value="查询" class="btn btn-primary" ></input>
							<button type="button" name="addBtn" class="btn btn-info"
								 onclick="location.href='addUser.html'">添加用户</button>
						</div>
					</div>
					<!-- panel结束 -->
					</form>
					<!--表单结束 -->
				</div>

			</div>
			<!-- 第一行结束 -->
		
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-primary">
					<div class="panel-heading">用户列表</div>
					<table class="table table-bordered table-hover text-center">
						<thead>
							<tr class="info">
								<td>用户名称</td>
								<td>用户密码</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody id="tb-content">
						</tbody>
					</table>

				</div>
			</div>

		</div>

	</div>
</body>
</html>
<script src="../static/js/axios.min.js"></script>
<script>
	//页面加载完成之后执行
	window.onload = function(){
		//给这个tb-content 赋值
		const url = "/user/list"
		axios.get(url)
				.then(function(res){
					const response = res.data
					const users = response.data

					//解析数据  遍历数据
					let str = "";
					for(let i = 0;i<users.length;i++){
						//拼接字符串
						 str += `<tr>
									<td>${users[i].username}</td>
									<td>${users[i].password}</td>
									<td>
										<button type="button" name="queryBtn" class="btn btn-success btn-xs" >更新</button>|
										<button type="button" name="queryBtn" class="btn btn-danger btn-xs" >删除</button>
									</td>
								</tr>`;
					}
					//将拼接好的字符串赋值给tb-content
					document.getElementById("tb-content").innerHTML = str;
				})


	}








</script>